﻿<style>
    .page{

    }
    .pageView, .pageSetMeal, .pageSingle{
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        max-height: 100vh;
    }
    .page-hv{
    }
    .page-hv .hv-title {
        background: linear-gradient(to right, rgba(254,121,84,0.6), rgba(254,121,84,1));
        -webkit-background-clip: text;
        color: transparent;
        font-weight: bold;
        font-size: .34rem;
        letter-spacing:0.5px;
    }
    .page-hv ::-webkit-scrollbar {
        display: none;
    }
    .hv-content {
        /*解决ios上滑动不流畅*/
        -webkit-overflow-scrolling: touch;
    }
    .hv-content .content-name{
        margin-top: .16rem;
        font-size: .28rem;
        line-height: .4rem;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .page-content{
        flex:1;
        display: flex;
        flex-direction: row;
    }
    .content-left{
        flex: 1;
        background-color: #F5F5F5;
        color:#B2B2B2;
        overflow-y: auto;
    }
    .text-choose{
        font-size: .28rem;
        font-weight: bold;
        color: #0f0f0f;
    }
    .bigText-choose{
        font-size: .64rem;
        font-family:PingFangSC-Semibold;
        color:rgba(51,51,51,1);
    }
    .bigText-tips{
        font-size:.45rem ;
    }
    .content-right{
        flex:2.8;
        overflow-y: auto;
    }
    .page-bottom{
    }
    .page-bottom .left{

    }
    .page-bottom .center{

    }
    .page-bottom .right{
        background: linear-gradient(to right, rgba(254,121,84,0.7), rgba(254,121,84,1));
        color: white;
        padding-top: 10px;
        font-size: .36rem
    }
    .page-bottom .right1{
        background: #999999;
        color: white;
        padding-top: 10px;
        font-size: .36rem
    }
    .page-bottom span{

    }
    .text-color{
        color: #FE7954;
    }

    .smallPhoto{
        width:1.76rem;
        height:1.6rem;
        margin-right:.16rem;
        display:block
    }
    .bigPhoto{
        width:2.72rem;
        height:2.72rem;
        margin-right:.32rem;
        display:block
    }
    .recommendImg{
        height :0;
        overflow :hidden;
        padding-bottom :76.7%
    }
    .box {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        max-height: 70%;
    }

    .box .content {
        position: relative;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .box .bg-title{
        background: linear-gradient(to right, rgba(254,121,84,0.6), rgba(254,121,84,1));
        color: white;
        font-size: .28rem;
    }
    .content.weui-cells::after {
        border-bottom: none;
    }
    .floatImg{
        position:fixed;
        bottom:1.8rem ;
        right: 0;
    }
    .bigIcon {
        width: .72rem;
        height: .72rem;
    }
    .normalIcon{
        width: .46rem;
        height: .46rem;
    }
    .smallIcon{
        width: .34rem;
        height: .34rem;
    }
    .weui-btn_orange{
        background-color:#FE7954 ;
    }
    .weui-btn_orangeBottom{
        background: linear-gradient(to right, rgba(254,121,84,0.8), rgba(254,121,84,1));
    }
    .weui-btn_gray{
        background-color: #999999;
    }
   .showDetail .weui-cells:before {
       border-top: none;
    }
    .weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before {
        content: '\EA06';
        color: #FE7954;
    }
    .BigFloatImg{
        width:60px ;
        height: 60px;
    }
    .SmallFloatImg{
        width:50px ;
        height: 50px;
    }
    .commendItem{
        width:2.4rem;
        display:inline-block;
        margin-bottom: 3px;
        border: 1px solid #eee;
        box-shadow: 0px 1px 3px #E2E2E2;
    }
</style>
    <div class="page js_show" ng-controller="ReserveOrderCtrl" style="">
        <div class="pageView" ng-show="!currMenuItem.isMeal() && !currMenuItem.isSetMeal() && !currMenuItem.isOneStandardMeal">
            <div class="page-hv wrapper-sm" ng-if="menu.commendItems.length>0">
                <span class="hv-title">菜品推荐</span>
                <div class="hv-content m-t-sm" style="width:100%;white-space:nowrap;overflow-x: auto;">
                    <div ng-repeat="item in menu.commendItems" class="m-r-sm commendItem">
                        <div class="recommendImg">
                            <img ng-src="../..{{item.picpath}}"
                                 img-error="img/wx/reserve/menuitem-default.jpg" class="w-full"   ng-click="menu.btnChooseItem_click(item,'img')">
                        </div>
                        <p class="content-name">{{item.name}}</p>
                        <div class="weui-flex">
                            <div class="weui-flex__item">
                                <p style="font-size: .36rem;line-height: .5rem;margin-top: .08rem" class="text-color">
                                ￥<span>{{item.standards[0].price + '起'}}</span>
                            </p>
                            </div>
                            <div class="weui-flex" style="padding-right: .24rem;line-height: .5rem;margin-top: .15rem;margin-bottom: .16rem">
                                    <div  ng-show="cart.itemCount(item)!=0">
                                        <img class="smallIcon" src="img/wx/reserve/Group.png" ng-click="menu.btnMinusCount_click(item)"/>
                                    </div>
                                    <div class="weui-flex__item"  ng-show="cart.itemCount(item)!=0" style="padding: 3px;font-size: .24rem;">
                                        {{cart.itemCount(item)}}
                                    </div>
                                    <div style="" >
                                        <img ng-click="menu.btnChooseItem_click(item)"src="img/wx/reserve/add.png" class="smallIcon"/>
                                    </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="page-content" >
                <div class="content-left"  ng-hide="menu.isShowbigModel">
                    <ul class="">
                        <li class="wrapper-md b-b text-center" ng-repeat="item in menu.menuTypes"
                            ng-click="menu.btnChooseCurrType_click(item)"
                            ng-class="{'text-choose':currMenuType.menuType == item}">
                            <span style="font-size: .28rem">{{item.name}}</span>
                        </li>
                    </ul>
                </div>
                <div class="content-right">
                    <div class="weui-cells"
                         ng-repeat="item in menu.menuItems | filter: { typecode:currMenuType.menuType.code}"
                         style="margin-top:0px">
                        <label class="weui-cell" style="padding: 0">
                            <div class="weui-cell__hd" ng-show="item.picpath != ''" ng-click="menu.btnChooseItem_click(item,'img')">
                                <img src="../..{{ item.picpath }}" img-error="img/wx/reserve/menuitem-default.jpg" ng-class="menu.isShowbigModel ? 'bigPhoto':'smallPhoto'"  />
                            </div>
                            <div class="weui-cell__hd" ng-show="item.picpath == ''" ng-click="menu.btnChooseItem_click(item,'img')">
                                <img src="img/wx/reserve/menuitem-default.jpg" ng-class="menu.isShowbigModel ? 'bigPhoto':'smallPhoto'" />
                            </div>
                            <div class="weui-cell__bd " style="padding-right: .24rem;">
                                <p><span  ng-class="menu.isShowbigModel ? 'bigText-choose':'text-choose'" >{{item.name}}</span></p>
                                <div class="weui-flex" style="margin-top: 30px">
                                    <div class="weui-flex__item">
                                        <p class="text-color " ng-class="{'text-tips':!menu.isShowbigModel,'bigText-tips':menu.isShowbigModel}">
                                            ￥<span class="">{{item.standards[0].price}}</span><span
                                                class="">起</span>
                                        </p>
                                    </div>
                                    <div class="text-right">
                                        <div class="weui-flex"  ng-show="!item.isSoldOut">
                                            <div style="margin-top:3px" ng-show="cart.itemCount(item)!=0">
                                                <img ng-class="menu.isShowbigModel ? 'bigIcon':'normalIcon'" ng-click="menu.btnMinusCount_click(item)"src="img/wx/reserve/Group.png"/>
                                            </div>
                                            <div class="weui-flex__item m-l-sm m-r-sm" ng-show="cart.itemCount(item)!=0"ng-class="{'text-tips':!menu.isShowbigModel,'bigText-tips':menu.isShowbigModel}">
                                                {{cart.itemCount(item)}}
                                            </div>
                                            <div style="margin-top:3px">
                                                <img ng-class="menu.isShowbigModel ? 'bigIcon':'normalIcon'" ng-click="menu.btnChooseItem_click(item)" src="img/wx/reserve/add.png"/>
                                            </div>
                                        </div>
                                        <div class="weui-flex text-color" ng-show="item.isSoldOut" style="font-size: 14px">
                                            <span >卖光啦</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
            </div>
            <div class="page-bottom"  ng-show="cart.hasCart()" style="border-top: 1px solid rgba(183,183,183,0.2)">
                <div class="weui-flex">
                    <div></div>
                    <div class="weui-flex__item  text-right center wrapper-sm"style="padding-right: 10px">
                        <span style="color:#B7B7B7;">合计:</span><span class="text-color" style="font-size: .4rem;font-weight: bold;">￥<span ng-bind="cart.totalPrice()"></span> </span>
                    </div>
                    <div class="text-center right"  style="padding-left:35px;padding-right:35px" ng-click="cart.payBill_click()">
                        <span style="">结算</span>
                    </div>
                </div>
            </div>
            <div class="page-bottom"  ng-show="!cart.hasCart()" style="border-top: 1px solid rgba(183,183,183,0.2)">
                <div class="weui-flex">
                    <div class="weui-flex__item"></div>
                    <div class="weui-flex__item  text-right center wrapper-sm"style="padding: 13px ">
                        <span style="color:#B7B7B7;font-size: .32rem">0个项目</span>
                    </div>
                    <div class="weui-flex__item text-center right1" >
                        <span class="m-t-xs">结算</span>
                    </div>
                </div>
            </div>
            <div class="cartImg"  ng-show="cart.hasCart() || cart.showMask"  ng-click="cart.showCartDetail_click()"><img src="img/wx/reserve/cart.png" style="width: 1.5rem;height: 1.5rem;position: fixed;bottom: 2px;z-index:9999"/></div>
            <div class="cartImg"  ng-show="!cart.hasCart()"><img src="img/wx/reserve/cart1.png" style="width: 1.2rem;height: 1.2rem;position: fixed;bottom: .5rem;left: 0.24rem";z-index="1002"/></div>
            <div class="floatImg" ng-click="menu.chooseSmallPhoto_click()"> <img src="img/wx/reserve/Hotspot.png" ng-class="menu.isShowbigModel?'BigFloatImg':'SmallFloatImg'"/></div>
        </div>
        <div class="pageSingle" ng-show="currMenuItem.isMeal() || currMenuItem.isOneStandardMeal">
            <div class="page__hd no-padder">
                <article class="weui-article no-padder">
                    <section class="m-b-none">
                        <img src="../..{{ currMenuItem.entity.picpath }}" img-error="img/wx/reserve/menuitem-default.jpg"
                             style="width: 100%;height: 35vh; object-fit: cover;"/>
                    </section>
                </article>
            </div>
            <div class="page__bd" style="flex: 1;overflow-y: auto">
                <div class="weui-cells m-t-none">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <p>{{currMenuItem.entity.name}}</p>
                            <p class="m-b-xs text-color" >
                                <span>{{currMenuItem.entity.currStandard.price}}</span>元
                                /
                                <span ng-bind="currMenuItem.entity.currStandard.unit"></span>
                            </p>
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <p class="m-b-sm">规格</p>
                            <div class="weui-btn  weui-btn_middle no-border m-r-sm"
                                 ng-repeat="item in currMenuItem.entity.standards"
                                 ng-class="{'weui-btn_default':currMenuItem.entity.currStandard !=item,'weui-btn_orange':currMenuItem.entity.currStandard == item}"
                                 ng-click="currMenuItem.entity.currStandard_click(item)"
                                 style="font-size:12px;display: inline-block">
                                <span>{{item.price}}</span>元 / <span ng-bind="item.unit"></span>
                            </div>
                        </div>
                    </div>

                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <p class="">数量</p>
                        </div>
                        <div class="weui-cell__ft">
                            <div class="weui-flex" ng-show="currMenuItem.entity.currStandard.soldout!= 0">
                                <div style="margin-top:4px" ng-show="currMenuItem.entity.currStandard.count!=0">
                                    <img class="normalIcon" ng-click="currMenuItem.entity.btnMinusCount_click()"
                                         src="img/wx/reserve/Group.png"/>
                                </div>
                                <div class="weui-flex__item m-l-sm m-r-sm" style="margin-top:3px" ng-show="currMenuItem.entity.currStandard.count!=0">
                                    {{currMenuItem.entity.currStandard.count}}
                                </div>
                                <div style="margin-top:4px">
                                    <img class="normalIcon" ng-click="currMenuItem.entity.btnAddCount_click()"
                                         src="img/wx/reserve/add.png"/>
                                </div>
                            </div>
                            <div class="weui-flex text-color" ng-show="currMenuItem.entity.currStandard.soldout == 0" style="font-size: 14px">
                                <span >卖光啦</span>
                            </div>
                        </div>
                    </div>
                    <div class="weui-cell" ng-show="currMenuItem.entity.recipes.length > 0">
                        <div class="weui-cell__bd">
                            <p class="m-b-sm">要求</p>
                            <label class="weui-btn  weui-btn_middle no-border m-r-xs"
                                   ng-repeat="item in currMenuItem.entity.recipes"
                                   ng-class="{'weui-btn_default':currMenuItem.entity.currRecipes.indexOf(item) == -1,'weui-btn_orange':currMenuItem.entity.currRecipes.indexOf(item) != -1}"
                                   ng-click="currMenuItem.entity.currRecipe_click(item)"
                                   style="font-size:12px;display: inline-block">
                                <span ng-bind="item"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="weui-cells weui-cells_form bg-default m-t-none m-b-sm">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                        <textarea class="weui-textarea" placeholder="其它要求" rows="3"
                                  ng-model="currMenuItem.entity.remark"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="weui-flex">
                    <div class="weui-btn  no-radius"
                         style="background-color:#666666;padding-left:25px;padding-right:25px"
                         ng-click="currMenuItem.entity.return_click()">返回
                    </div>
                    <div class="weui-flex__item">
                        <a class="weui-btn weui-btn_orangeBottom no-radius"  ng-class="!currMenuItem.entity.hasCountMeal() ? 'weui-btn_disabled':''" ng-click="currMenuItem.entity.chooses_ok_click()">确认</a>
                    </div>
                    <div/>
                </div>
            </div>

        </div>
        <div class="pageSetMeal" ng-show="currMenuItem.isSetMeal()">
            <div class="page__hd no-padder">
                <article class="weui-article no-padder">
                    <section class="m-b-none">
                        <img src="../..{{ currMenuItem.entity.picpath }}" img-error="img/wx/reserve/menuitem-default.jpg"
                             style="width: 100%;height: 35vh; object-fit: cover;"/>
                    </section>
                </article>
            </div>
            <div class="page__bd no-padder" style="flex: 1;overflow-y: auto">
                <div class="weui-cells m-t-none">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <p>{{currMenuItem.entity.name}}</p>
                            <p class="m-b-xs text-color"  ng-show="currMenuItem.entity.totalPrice() != 0">
                                <span>{{currMenuItem.entity.totalPrice()}}</span>元
                                /
                                <span ng-bind="currMenuItem.entity.currStandard.unit"></span>
                            </p>
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <p  style="color:#999999;">数量</p>
                        </div>
                        <div class="weui-cell__ft">
                            <div class="weui-flex">
                                <div style="margin-top:4px">
                                    <img class="normalIcon" ng-click="currMenuItem.entity.btnMinusCount_click()"
                                         src="img/wx/reserve/Group.png"/>
                                </div>
                                <div class="weui-flex__item m-l-sm m-r-sm" style="margin-top:3px">
                                    {{currMenuItem.entity.currStandard.count}}
                                </div>
                                <div style="margin-top:4px">
                                    <img class="normalIcon" ng-click="currMenuItem.entity.btnAddCount_click()"
                                         src="img/wx/reserve/add.png"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="setMeal" ng-repeat="item in currMenuItem.entity.types">
                        <div class="weui-flex wrapper m-t-sm" style="line-height:1"
                             ng-click="currMenuItem.entity.chooseCurrMealTypes_click(item)"
                             ng-class="item.code != currMenuItem.entity.currMealType.code ? 'b-b':''">
                            <p class="weui-flex__item">
                                <span style="color: #000000;font-size: .4rem;font-weight: bold" ng-bind="item.typeName"></span>
                                <small style="color:#999999">(已选<span class="text-color">{{currMenuItem.entity.totalCount(item.code)}}</span>份/必选{{item.max}}份)</small>
                            </p>&nbsp;
                            <img src="img/wx/order_dishes/rightMeal.png"
                                 ng-show="item.code != currMenuItem.entity.currMealType.code"/>
                            <img src="img/wx/order_dishes/downMeal.png"
                                 ng-show="item.code == currMenuItem.entity.currMealType.code"/>
                        </div>
                        <div class="showDetail m-t-none"
                             ng-show="item.code == currMenuItem.entity.currMealType.code">
                            <div class="weui-cells weui-cells_checkbox m-t-none">
                                <div ng-repeat="item1 in currMenuItem.entity.mealList | filter:{typecode:currMenuItem.entity.currMealType.code}">
                                    <label class="weui-cell weui-check__label">
                                        <div class="weui-cell__bd">
                                            <p style="color: #666666;font-size: .3rem"><span>{{item1.name}}</span>/<span>{{item1.unit}}</span> 共<span>{{item1.count}}</span>份</p>
                                        </div>
                                        <div class="weui-cell__hd">
                                            <input type="checkbox" class="weui-check" ng-model="item1.defaultSelected"
                                                   ng-change="item1.chooseItem_change()">
                                            <i class="weui-icon-checked"></i>
                                        </div>
                                    </label>
                                    <div class="m-l-sm">
                                           <span class="weui-btn weui-btn_xs m-r-xs "
                                                          ng-repeat="recipe in item1.recipes"
                                                          ng-class="{'weui-btn_default':item1.currRecipes.indexOf(recipe) == -1,'weui-btn_orange':item1.currRecipes.indexOf(recipe) != -1}"
                                                          ng-click="item1.currRecipe_click(recipe);$event.stopPropagation();"
                                                          ng-show="item1.defaultSelected"
                                                          style="font-size:12px;display: inline-block;margin-top: -15px">
                                            <span ng-bind="recipe"></span>
                                        </span>
                                     </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                <div class="weui-cells weui-cells_form bg-default m-t-none m-b-sm">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                        <textarea class="weui-textarea" placeholder="其它要求" rows="3"
                                  ng-model="currMenuItem.entity.remark"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="weui-flex" ng-show="currMenuItem.isSetMeal()">
                    <div>
                        <a class="weui-btn  no-radius" style="background-color:#666666;padding-left:25px;padding-right:25px"
                           ng-click="currMenuItem.entity.return_click()">返回</a>
                    </div>
                    <div class="weui-flex__item">
                        <a class="weui-btn weui-btn_orangeBottom  no-radius"
                           ng-class="!currMenuItem.entity.hasCountSetMeal() ? 'weui-btn_disabled':''"
                           ng-click="currMenuItem.entity.chooseMeal_ok_click()">
                            <span ng-bind="currMenuItem.entity.btnChooseMealOK_text()"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div ng-show="cart.showMask">
            <div class="weui-mask" ng-click="cart.cancelMask_click()"></div>
            <div class="weui-actionsheet weui-actionsheet_toggle box" style="background-color: #fff">
                <div class="weui-cells m-t-none bg-title">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <p class="">已选商品</p>
                        </div>
                        <div class="weui-cell__ft" style="color: white" ng-click="cart.btnCancelCart_click()"><span ><img style="width: .3rem;" src="img/wx/reserve/delete.png"></span> 清空购物车</div>
                    </div>
                </div>
                <div class="content weui-cells m-t-none padder ">
                    <div class="b-b" ng-repeat="item in cart.items">
                        <div class="weui-flex  wrapper-xs" style="line-height:1">
                            <div class="weui-flex__item text-sm" style="margin-top:4px">
                                <div class="placeholder m-b-xs">{{item.name}}</div>
                                &emsp;<label style="font-size:10px;color:#ABABAB;"
                                             ng-show="item.recipes.length > 0"
                                             ng-repeat="item1 in item.recipes">
                                <span>{{item1}}</span>
                            </label>
                                <div style="font-size:13px;color:#ABABAB;" ng-show="item.setMeal">
                                    <div ng-repeat="item1 in item.setMeal ">
                                        <p style="text-indent:5px">
                                            &emsp;<span ng-bind="item1.name"></span> X <span
                                                ng-bind="item1.count"></span>
                                            <span ng-show="item1.currRecipes.length">&emsp;(<span
                                                    ng-bind="item1.currRecipes.join(', ')"></span>)</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="text-sm" style="margin-top:4px">
                                <div class="placeholder" ng-show="item.setMeal.length == 0">
                                    <span>{{item.standrand.price}}</span>/{{item.standrand.unit}}
                                </div>
                                <div class="placeholder" ng-show="item.setMeal.length > 0">
                                    <span>{{item.price}}</span>/{{item.standrand.unit}}
                                </div>
                            </div>
                            <div class="text-sm m-l-sm">
                                    <div class="weui-flex">
                                        <div style="margin-top:3px" class="weui-flex__item text-right"
                                             ng-click="item.btnMinusCartCount_click()">
                                            <img class="smallIcon" src="img/wx/reserve/Group.png"/>
                                        </div>
                                        <div class="weui-flex__item text-center" style="margin-top:5px;padding: 0 3px">
                                            {{item.count}}
                                        </div>
                                        <div class="weui-flex__item" style="margin-top:3px"
                                             ng-click="item.btnAddCartCount_click()">
                                            <img class="smallIcon" src="img/wx/reserve/add.png"/>
                                        </div>
                                    </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="weui-flex page-bottom">
                    <div class="">
                    </div>
                    <div class="weui-flex__item  text-right center wrapper-sm"style="padding-right: 10px">
                        <span style="color:#B7B7B7;">合计:</span>
                        <span class="text-color" style="font-size: .4rem;font-weight: bold;">￥<span ng-bind="cart.totalPrice()"></span> </span>
                    </div>
                    <div class="text-center right" ng-click="cart.payBill_click()" style="padding-left:35px;padding-right:35px">
                        <span style="">结算</span>
                    </div>
                </div>
            </div>
        </div>

    </div>
